//! 新增目录弹框组件
<template>
  <div class="DireAdd">
    <el-dialog
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="400px"
      :before-close="closeHandlerB"
    >
      <!-- 主体区域 -->
      <el-form
        :model="form"
        :rules="directorysFormRules"
        ref="directorysFormRef"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" label-width="">
          <el-select v-model="directorysForm.value" placeholder="请选择">
            <el-option
              v-for="item of addFrom"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" label-width="80px">
          <el-input
            size="medium"
            v-model="directorysForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <div slot="footer" class="dialog-footer">
        <div class="tar">
          <el-button @click="closeHandlerB">取 消</el-button>
          <el-button type="primary" @click="addDirForm">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add } from "@/api/hmmm/directorys.js";
import { simple } from "@/api/hmmm/subjects.js";
export default {
  name: "",
  components: {},
  props: {
    // 弹层状态
    addDialogVisible: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      form: {
        name: "",
        region: ""
      },
      // 添加的验证
      directorysFormRules: {
        directoryName: [
          { required: true, message: "请输入目录名称", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        subjectID: [
          { required: true, message: "", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ]
      },
      addFrom: [], // 存储简单数据列表
      formLabelWidth: "120px",

      // 修改弹窗的状态显示
      editDialogVisible: false,

      // 修改的请求数据
      editDirectoryList: {
        value: "",
        directoryName: ""
      },
      // 添加的输入框数据
      directorysForm: {
        // 下拉框的值
        value: "",
        directoryName: ""
      }
    };
  },
  computed: {},
  watch: {},
  created() {
    simple().then(res => {
      this.addFrom = res.data;
    });
  },
  mounted() {},
  methods: {
    closeHandlerB() {
      // 关闭弹层 通知父组件
      this.$emit("close");
    },
    // 获取简单数据列表
    async getSimpleDate() {
      try {
        const { data } = await simple(null);
        this.addFrom = data;
      } catch (err) {
        this.$message.error("请求数据失败");
      }
    },
    // 新增目录.then方法
    addDirForm() {
      add({
        // 学科id
        subjectID: this.directorysForm.value,
        // 目录名称
        directoryName: this.directorysForm.directoryName
      })
        .then(res => {
          // this.addDialogVisible = false;
          this.$emit("close");
          // 更新视图
          // this.loadList();
          this.$emit("shuaxin");
          this.$message.success("添加目录成功");
        })
        .catch(res => {
          this.$message.error("添加目录失败");
        });
    },
    // 新增弹窗 按钮的清空功能
    closeHandler() {
      // this.addDialogVisible = false;
      this.directorysForm.directoryName = "";
      this.directorysForm.value = "";
    },
    // 重置清空
    editResetSub() {
      this.$refs.directorysFormRef.resetFields();
    }
  }
};
</script>
<style lang="less" scoped></style>
